<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>

	<style type="text/css">
		body {
			font-family: 'Microsoft Yahei';
		}

		body,
		ul {
			margin: 0px;
			padding: 0px;
		}

		ul {
			list-style: none;
		}


		.menu {
			width: 200px;
			margin: 20px auto 0;
		}

		.menu .level1,
		.menu li ul a {
			display: block;
			width: 200px;
			height: 30px;
			line-height: 30px;
			text-decoration: none;
			background-color: #3366cc;
			color: #fff;
			font-size: 16px;
			text-indent: 10px;
		}

		.menu .level1 {
			border-bottom: 1px solid #afc6f6;
		}

		.menu li ul a {
			font-size: 14px;
			text-indent: 20px;
			background-color: #7aa1ef;
		}

		.menu li ul li {
			border-bottom: 1px solid #afc6f6;
		}

		.menu li ul {
			display: none;
		}

		.menu li ul.current {
			display: block;
		}

		.menu li ul li a:hover {
			background-color: #f6b544;
		}
	</style>

	<script src="./js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function () {
			// 取出所有第一级a标签 设置点击事件
			$(".level1").click(function () {
				// $(this) 是当前点击的a标签
				// .next() 获取点击的a标签的下一个元素 也就是ul
				// .slideDown() 把这个ul展开
				// .parent() 选中这个ul的父级li标签
				// .siblings()选中这个li同级的其它所有li
				// .children选中其它li里面的子级ul
				// 把这些ul收起来

				$(this).next().slideDown().parent().siblings().children("ul").slideUp();

				
			});

		});
	</script>


</head>

<body>
	<ul class="menu">
		<li>
			<a href="#" class="level1">水果</a>
			<ul class="current">
				<li><a href="#">苹果</a></li>
				<li><a href="#">梨子</a></li>
				<li><a href="#">葡萄</a></li>
				<li><a href="#">火龙果</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">海鲜</a>
			<ul>
				<li><a href="#">蛏子</a></li>
				<li><a href="#">扇贝</a></li>
				<li><a href="#">龙虾</a></li>
				<li><a href="#">象拔蚌</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">肉类</a>
			<ul>
				<li><a href="#">内蒙古羊肉</a></li>
				<li><a href="#">进口牛肉</a></li>
				<li><a href="#">野猪肉</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">蔬菜</a>
			<ul>
				<li><a href="#">娃娃菜</a></li>
				<li><a href="#">西红柿</a></li>
				<li><a href="#">西芹</a></li>
				<li><a href="#">胡萝卜</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">速冻</a>
			<ul>
				<li><a href="#">冰淇淋</a></li>
				<li><a href="#">湾仔码头</a></li>
				<li><a href="#">海参</a></li>
				<li><a href="#">牛肉丸</a></li>
			</ul>
		</li>

	</ul>
</body>

</html>